<template>
  <div class="widget-style">
    <div class="align">
      <!-- 水平等间距 -->
      <a-tooltip placement="bottom" class="ant-tooltip-open">
        <template slot="title">
          <span>水平等间距</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-shuipingdengjianju-" />
        </a>
      </a-tooltip>
     
      <!-- 垂直等间距 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>水平等间距</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-chuizhidengjianju-" />
        </a>
      </a-tooltip>
      
      <!-- 左对齐 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>左对齐</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-zuoduiqi1" />
        </a>
      </a-tooltip>

      <!-- 居中对齐 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>居中对齐</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-shuipingjuzhongduiqi" />
        </a>
      </a-tooltip>

      <!-- 右对齐 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>右对齐</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-youduiqi" />
        </a>
      </a-tooltip>
      <!-- 顶对齐 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>顶对齐</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-zuoduiqi1-copy" />
        </a>
      </a-tooltip>
      <!-- 垂直居中 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>垂直居中</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-shuipingjuzhongduiqi-copy" />
        </a>
      </a-tooltip>
      <!-- 底对齐 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>底对齐</span>
        </template>
        <a href="JavaScript:void(0)">
          <icon name="icon-youduiqi-copy" />
        </a>
      </a-tooltip>
    </div>
    <main>
      <div style="height:20px;backgroud:red;margin:20px;" v-for="i in 30" :key="i">{{i}}</div>
    </main>
  </div>
</template>
<script>
export default {
  name: 'widget-style'
}
</script>
<style lang="less" scoped>

.widget-style {
  height: 0;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  padding: 0px 0px 0px 10px;
  .align {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 5px 0px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(219, 219, 219);
    > a {
      .icon {
        padding: 4px;
        width: 23px;
        height: 23px;
        color: black;
      }
      .icon:hover {
        //   color: unset;
        cursor: pointer;
        background-color: rgb(237, 237, 237);
      }
    }
  }
  main {
    flex: 1 1 0%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>